<template>
  <el-container class="container">
    <el-header height="100%">
      <el-form :model="roleForm" ref="roleForm" label-width="80px" class="form">
        <el-row>
          <el-col :span="6">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="roleForm.roleName" clearable placeholder="请输入角色名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="权限字符" prop="roleKey">
              <el-input v-model="roleForm.roleKey" clearable placeholder="请输入权限字符"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态" prop="status">
              <el-select v-model="roleForm.status" clearable placeholder="请选择状态">
                <el-option label="正常" value="0"/>
                <el-option label="停用" value="1"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-row>
                <el-col :span="11">
                  <el-date-picker v-model="roleForm.startTime" type="date" placeholder="开始日期" style="width: 100%;"/>
                </el-col>
                <el-col :span="2" class="line">-</el-col>
                <el-col :span="11">
                  <el-date-picker v-model="roleForm.endTime" type="date" placeholder="结束日期" style="width: 100%;"/>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="40px">
              <el-button type="primary" @click="onSubmit" icon="el-icon-search">搜索</el-button>
              <el-button @click="resetForm('roleForm')" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="padding-left: 10px">
          <el-button type="primary" plain icon="el-icon-plus">新增</el-button>
          <el-button type="success" plain icon="el-icon-edit" :disabled="multipleSelection.length !== 1">修改</el-button>
          <el-button type="danger" plain icon="el-icon-delete" :disabled="multipleSelection.length === 0"
                     @click="handlerRemove()">删除
          </el-button>
          <el-button type="info" plain icon="el-icon-upload2">导入</el-button>
          <el-button type="warning" plain icon="el-icon-download">导出</el-button>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="roleData"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        max-height="250">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          type="index"
          label="编号"
          width="50">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="roleKey"
          label="权限字符"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="显示顺序"
          min-width="120">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          min-width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="0"
              active-color="#13ce66">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          min-width="160">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="120">
          <template slot-scope="scope">
            <el-row>
              <el-button type="text" icon="el-icon-edit" size="small">修改</el-button>
              <el-button type="text" icon="el-icon-delete" size="small" @click="handlerRemove(scope.row.roleId)">删除
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer height="30px">
      <el-row>
        <el-col :span="24" class="line">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5, 10 ,15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import roleApi from '@/api/system/role';

export default {
  name: 'index',
  data() {
    return {
      roleForm: {
        roleName: '',
        roleKey: '',
        status: null,
        startTime: '',
        endTime: '',
      },
      pageNo: 1,
      pageSize: 5,
      total: 0,
      roleData: [],
      multipleSelection: [],
    };
  },
  created() {
    this.fetchData(1);
  },
  methods: {
    fetchData(pageNo = this.pageNo, pageSize = this.pageSize, searchObj = this.roleForm) {
      roleApi.getRoleList(pageNo, pageSize, searchObj).then(res => {
        const returnData = res.data;
        this.pageNo = returnData.pageNum;
        this.total = returnData.total;
        this.roleData = returnData.list;
      });
    },
    onSubmit() {
      this.fetchData(1);
    },
    resetForm(formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields();
        this.fetchData(1);
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData(1);
    },
    handleCurrentChange(val) {
      this.pageNo = val;
      this.fetchData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handlerRemove(id) {
      let ids = id == null ? this.multipleSelection.map(t => t.roleId) : [id];
      let roleNames = this.multipleSelection.filter(t => ids.includes(t.roleId)).map(t => t.roleName);
      this.$confirm('是否确认删除"'+roleNames+'"的角色?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        roleApi.delBatch(ids).then(res => {
          if (res.data === true) {
            this.fetchData(1);
            this.$message({
              message: '删除成功',
              type: 'success',
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}

.form {
  /*padding-top: 20px;*/
  /*padding-bottom: -15px;*/
}

.container {
  padding: 20px 10px;
}
</style>
